import React, { Component } from 'react';

//* 创建url
/* 类组件
    export  与 export default
    constructor
        this.state  bind this
        如果有本地缓存可以直接进行获取
        loc || ''
    render
        页面渲染发源地
        执行两次
            正常都需要判断第一次过滤掉 obj arr
    生命周期
        三阶段
        ajax 可在didMount和update 中执行
        如果在update中执行需要考虑符合条件，要不会一直执行
        willUnmount 一般做取消订阅  清定时器  取消中止ajax
        企业面试题：如果当前组件ajax 未执行完成时 用户操作了其他组件
        这时候会报错，数据问题，如何处理  答：在willUnmount中取消或中止ajax
        第二问：除了didMount中请求ajax 还可以在哪个周期哪个方法中执行需要注意什么
    state
        当前页面有关 两种setState 方法
        箭头函数 return
    props
        父组件 传值


**/


import Child from './Child.jsx';
import Child2 from './Child2.jsx';
import Child3 from './Child3.jsx';
// src /
//     components
//         全局  header   nav footer 弹层 等
//     views
//         Com
//             index.jsx
//             Child.jsx
//             aa.jsx
//             bb.jsx
class View extends Component {
    constructor(props){
        super(props);
        this.state = {
            page:1,
            name:'11'
        }
        // state 初始化
        // this
    }
    setState(){
        this.setState({
            page:2,
        })
        this.setState({
            name:"react"
        })
        this.state.page++

        this.setState((state,props)=>({
            page:state.page++
        }))
        this.setState(function(state,props){
            console.log(state,props)
            return{
                page:state.page++
            }
        })
        this.setState({
            page:this.state.page+this.state.props
        })
    }




    componentDidMount(){
        // 生命周期
        // 三阶段
        // 更新
        // setTimeout   ajax
        // render  写数据时 都会增加判断
        // 数组的长度   对象
        // arr = []; arr.length
        // arr = [1,2,3]
        //
        // obj = {
        //
        // }
        // obj = {
        //     a:'1'
        // }
        // obj.a ? <> : ''
        //
        // map  arr x

    }
    _render(){

    }
    callback(test){
        console.log(test)
    }
    render(){
        const obj = {
            name:'objname'
        }
        return(
            <React.Fragment>
                <div>com</div>
                <div>com</div>
                <Child name="父组件内容"/>
                <Child obj={obj}/>
                <Child {...obj}/>
                <Child {...this.props}/>
                <Child2 nav={<Child />} con={<Child />}>
                    <span>这是span标签的内容</span>
                </Child2>
                <Child2 nav={<Child />} con={<Child />}>
                    <span>这是span标签的内容</span>
                </Child2>
                <ul><li></li></ul>
                <ol><li></li></ol>
                <Child3 callback={this.callback}/>
            </React.Fragment>
        )
    }

}









export default View;
